var searchInput = document.querySelector('.search input');
var searchchLi = document.querySelector('.search-list');

searchInput.onfocus= function () {
    searchchLi.style.borderColor='#30cd71';
   
}
searchInput.onblur = function () {
     searchchLi.style.borderColor='#999';
}

        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var banner = document.querySelector('.banner');
        var arr = ['#060606','#feff0f','#fdf100','#2c9aff','#89dce3','#fef8b3','#110204','#f4cad8'];


        var index = 0;

         //上一张
        function prevImg() {
            index = index == 0 ? index = imgLis.length - 1 : index - 1;
            showImg();
        }
        // 下一张
        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }

        function showImg(){
            for(var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
            }
            imgLis[index].className='current';
            indicatorLis[index].className = 'active';
            banner.style.backgroundColor = arr[index];
        }
        var timer = setInterval(nextImg, 1000);

         // 2.图标跟随指示灯切换
        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i;
            indicatorLis[i].onclick = function () {

                clearInterval(timer);
                timer = null;

                index = this.index;
                showImg();
            }

        banner.onmouseover = function () {
            clearInterval(timer);
            timer = null;
           prev.style.display = 'block';
             next.style.display = 'block';
        }
        banner.onmouseout = function () {
            if (timer != null) {
                    return;
                }
                 prev.style.display = 'none';
                 next.style.display = 'none';
                timer = setInterval(nextImg, 2000);
            }
   
            
        prev.onclick = function () {
            prevImg();
        }
        next.onclick = function () {
            nextImg();
        }
        }